import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/models/property_order_detail_entity.dart';
import 'package:kkhousekeep/page/home/convenient/order/repairs_detail_controller.dart';
import 'package:kkhousekeep/widget/border_timeline.dart';
import 'package:kkhousekeep/widget/custom_app_bar.dart';
import 'package:kkhousekeep/widget/shadow_widget.dart';

class RepairsDetailPage extends StatelessWidget {
  const RepairsDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<RepairsDetailController>(
      init: RepairsDetailController(),
      builder: (controller) => Scaffold(
        extendBodyBehindAppBar: true,
        appBar: CustomAppBar(
          "报修详情",
          backgroundColor: Colors.transparent,
        ),
        body: Container(
          constraints: const BoxConstraints.expand(),
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/page_bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: SafeArea(
            left: false,
            right: false,
            child: SingleChildScrollView(
              child: Container(
                child: _buildDetailList(),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildDetailList() {
    RepairsDetailController controller = Get.find();
    return Obx(
      () => ShadowWidget.fixedHeight(
        backgroundColor: Colors.white,
        radius: 24,
        paddingHorizontal: 48,
        paddingVertical: 32,
        marginHorizontal: 32,
        marginVertical: 32,
        child: Column(
          children: [
            _buildDetail(),
            Container(
              alignment: Alignment.centerLeft,
              child: Text(
                controller.fatalDesc.value,
                textAlign: TextAlign.left,
                style:
                    TextStyle(fontSize: 32.sp, color: const Color(0xFF333333)),
              ),
            ),
            buildDescriptionPicture(),
            Divider(
              height: 2.h,
              color: const Color(0xFFD8D8D8),
            ),
            buildProcessStepList()
          ],
        ),
      ),
    );
  }

  Widget _buildDetail() {
    RepairsDetailController controller = Get.find();
    return Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      // defaultColumnWidth: const FixedColumnWidth(80),
      columnWidths: const {
        0: IntrinsicColumnWidth(),
        1: FlexColumnWidth(),
      },
      children: [
        TableRow(children: [
          buildFormTitle("报修区域"),
          buildFormContent(controller.area.value),
        ]),
        TableRow(children: [
          buildFormTitle("报修地址"),
          buildFormContent(controller.address.value),
        ]),
        TableRow(children: [
          buildFormTitle("报修人"),
          buildFormContent(controller.reporter.value),
        ]),
        TableRow(children: [
          buildFormTitle("电话"),
          buildFormContent(controller.phone.value),
        ]),
        TableRow(children: [
          buildFormTitle("紧急程度"),
          buildFormContent(controller.urgency.value),
        ]),
        TableRow(children: [
          buildFormTitle("故障类型", paddingBottom: 26.h),
          buildFormContent(controller.fatalType.value,
              paddingTop: 16.h, paddingBottom: 26.h),
        ]),
        TableRow(
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        width: 1.h, color: const Color(0xFFD8D8D8)))),
            children: [
              buildFormTitle("故障描述", paddingTop: 26.h),
              buildFormContent(""),
            ]),
      ],
    );
  }

  buildFormTitle(String title, {double? paddingTop, double? paddingBottom}) {
    return Padding(
      padding: EdgeInsets.only(
          top: paddingTop ?? 16.h, bottom: paddingBottom ?? 16.h),
      child: Text(
        title,
        style: TextStyle(fontSize: 32.sp, color: const Color(0xFF6D6D6D)),
      ),
    );
  }

  buildFormContent(String content,
      {double? paddingTop, double? paddingBottom}) {
    return Padding(
      padding: EdgeInsets.only(
          left: 72.w, top: paddingTop ?? 0, bottom: paddingBottom ?? 0),
      child: Text(
        content,
        style: TextStyle(fontSize: 32.sp, color: const Color(0xFF333333)),
      ),
    );
  }

  buildDescriptionPicture() {
    RepairsDetailController controller = Get.find();
    return GridView.builder(
      primary: false,
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 12.h, bottom: 40.h),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 24.h,
        crossAxisSpacing: 24.w,
      ),
      itemCount: controller.descImg.length,
      itemBuilder: (context, index) {
        return buildDescriptionPictureItem(controller.descImg[index]);
      },
    );
  }

  buildDescriptionPictureItem(String imgUrl) {
    RepairsDetailController controller = Get.find();
    return InkWell(
      child: CachedNetworkImage(
        imageUrl: imgUrl,
        imageBuilder: (context, imageProvider) => Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(6.r),
            ),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: imageProvider,
            ),
          ),
        ),
        placeholder: (context, url) => Container(
          color: Colors.grey,
        ),
        errorWidget: (context, url, error) => const Icon(Icons.error),
      ),
      onTap: () {
        if (imgUrl.isNotEmpty) {
          controller.clickImageItem(imgUrl);
        }
      },
    );
  }

  buildProcessStepList() {
    RepairsDetailController controller = Get.find();
    return ListView.separated(
            primary: false,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return buildProcessStepItem(
                  controller.records[index], index, controller.records.length);
            },
            separatorBuilder: (context, index) => Divider(
                  height: 0.h,
                  thickness: 0,
                  indent: 0,
                  color: Colors.transparent,
                ),
            itemCount: controller.records.length)
        .marginOnly(top: 40.h);
  }

  buildProcessStepItem(
      PropertyOrderDetailObjRecord record, int index, int count) {
    return Container(
        height: 116.h,
        width: double.infinity,
        padding: EdgeInsets.only(left: 48.w),
        decoration: BoxDecoration(border: BorderTimeLine(index, count)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: ((index == count - 1)
                            ? [
                                const Color(0xFF0A4EF1),
                                const Color(0xFF7AE0E7),
                              ]
                            : [
                                const Color(0xFFF0F2F7),
                                const Color(0xFFF0F2F7),
                              ]),
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20.r))),
                  padding:
                      EdgeInsets.symmetric(vertical: 4.h, horizontal: 12.w),
                  child: Text(
                    "${record.operation}时间",
                    style: TextStyle(
                      fontSize: 24.sp,
                      color: (index == count - 1)
                          ? Colors.white
                          : const Color(0XFF999999),
                    ),
                  ),
                ),
                SizedBox(
                  width: 8.w,
                ),
                Text(
                  " ${record.time}",
                  style: TextStyle(
                    fontSize: 24.sp,
                    color: (index == count - 1)
                        ? const Color(0XFF6D6D6D)
                        : const Color(0XFF999999),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 12.h,
            ),
            Text(
              "操作人：${record.xOperator}",
              style: TextStyle(
                fontSize: 24.sp,
                color: (index == count - 1)
                    ? const Color(0XFF333333)
                    : const Color(0XFF999999),
              ),
            )
          ],
        ));
  }
}
